<template>
  <div class="book-item-container">
    <div class="left">{{ order + 1 }}.</div>
    <div class="center">
      <div class="question">
        <div class="title"><span class="mark">{{ item.questionType === '1' ? '单选题' : '多空单选题' }}</span>{{ item.questionTitle }}</div>
      </div>
      <div class="answer">
        <el-tabs v-if="answerList.length > 1" v-model="currentAnswer" type="card" class="demo-tabs">
          <el-tab-pane v-for="(answer, index) in answerList" :key="index" :label="`答案${index + 1}`" :name="index + 1">
            <div class="ii-label" v-for="ii in answer">
              {{ `${ii.optionLabel}.${ii.content}` }}
            </div>
          </el-tab-pane>
        </el-tabs>
        <div v-else>
          <div class="ii-label" v-for="ii in answerList[0]">
              {{ `${ii.optionLabel}.${ii.content}` }}
            </div>
        </div>
      </div>
    </div>
    <div class="right">
      <el-button type="primary" @click="handleUpdate">修改</el-button>
      <el-button type="primary" plain @click="handleDel">删除</el-button>
    </div>
  </div>
</template>

<script setup>
import { watch, ref } from 'vue'

const emits = defineEmits(['update', 'del'])
const answerList = ref([])
const currentAnswer = ref(1)
const props = defineProps({
  item: {
    type: Object,
    default: new Object()
  },
  order:{
    type: Number,
    default: 10
  }
})
watch(() => props.item, value => {
  answerList.value = JSON.parse(props.item.questionAnswers)
}, {
  immediate: true
})
const handleUpdate = () => {
  emits('update')
}
const handleDel = () => {
  emits('del')
}
</script>

<style lang='scss' scoped>
@import './index.scss'
</style>